<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8"/>
    <link rel="icon" type="image/svg+xml" href="/vite.svg"/>
    <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
    <title>text</title>
</head>
<body>
<div id="container"></div>
<script type="module">
    import Konva from "konva";

    var width = window.innerWidth;
    var height = window.innerHeight;

    let stage = new Konva.Stage({container: 'container', width: width, height: height});
    let layer = new Konva.Layer();
    stage.add(layer);

    let text = new Konva.Text({
        x: 20,
        y: 60,
        text: "Complex Text\n\nAll the word's a stage, and all the men and women merely players.",
        fontSize: 18,
        fontFamily: "Roman",
        fill: "#555",
        width: 300,
        padding: 20,
        align: "center"
    });

    let rect = new Konva.Rect({
        x: 20,
        y: 60,
        width: text.width(),
        height: text.height(),
        fill: "lightgray",
        stroke: "gray",
        cornerRadius: 5
    });

    let group = new Konva.Group({
        draggable: true
    });
    group.add(rect);
    group.add(text);
    layer.add(group);
</script>
</body>
</html>
